<%@ page language="java" pageEncoding="UTF-8"%>
<!--分页查询共用的页面-->
<%@ include file="/common/paginateUtil.jsp"%>
  
    <script type="text/javascript" src="<%=jsPath%>/jquery/jquery.validate.js"></script><!--表单数据验证-->
    <script type="text/javascript" src="<%=jsPath%>/jquery/jquery.metadata.js"  charset="UTF-8"></script><!--表单数据验证-->
</head>

		<script type="text/javascript" charset="utf-8">
			//删除表格的某一行，删除后，会自动刷新表格			
			function getDeleteActionColumn(key, url)
			{  
	              return { "mData": null ,
						"fnRender": function ( oObj, sVal ) {			
					       var entityId = oObj.aData[key];
						   //alert(entityId);
							var html =  "<img src='<%=imgPath%>/cross.gif' onclick=\"Utility.deleteEntity('" + url + "','" +entityId+"');\"/>";
							//alert(html);
						   return html;
				          }
				  };
			}

			function getCheckboxColumn(key)
			{  
	              return { "mData": null ,
						"fnRender": function ( oObj, sVal ) {			
					       var entityId = oObj.aData[key];
						   //alert(entityId);
							var html =  '<input class="cb" type=checkbox name=enclosureIds value="' + entityId + '" />';
							//alert(html);
						   return html;
				          }
				  };
			}


			//编辑列
			function getEditActionColumn(key)
			{
				return { "mData": null ,  
						"fnRender": function ( oObj, sVal ) {
					       var entityId = oObj.aData[key];
				           var html =  "<a href=\"javascript:InfoWindow.viewEnclosure('" + entityId+ "');\">" +" 查看</a>";
						   return html;
						 }};

			}

            /**解除绑定时，将表单POST URL指向解除的Action ,然后提交 */
			function unbind()
			{
				var enclosureId = $("#enclosureId").val();
				if(enclosureId.length < 1)
				{
					alert("请选择要解除绑定的围栏!");
				    return;
				}
				var url = "<%=ApplicationPath%>/data/enclosureBinding!unbindVehicle.action";
				$("#entityForm").attr("action", url);
				$("#btnBind").click();
			}

	

			$(document).ready(function() {
			      //对应数据库SQL查询的字段名
			      var columns = [
				getCheckboxColumn("enclosureId"), 
						{ "mData": "name" },
						{ "mData": "enclosureType" },
						{ "mData": "alarmType" },
						{ "mData": "startDate" },
						{ "mData": "endDate" },
						{ "mData": "maxSpeed" },
						{ "mData": "createDate" },
					];
				 
					  $("#configType").lookup({category:"AreaConfigCommand"}); //区域设置类型下拉框
					  $("#enclosureType").lookup({category:"EnclosureType"}); //围栏类型下拉框
				  
				 $("#enclosureId").lookup({queryID:"selectEnclosureList", selectedValue:"${enclosureId}", vehicleId:"${vehicleId}"});

			      var dataTable = Utility.initTable(columns, "<%=ApplicationPath%>/data/getBindEnclosure.action");
				  Utility.ajaxSubmitForm("entityForm", 
					{
						 success:function(result)
						{
							 if(result.success)
							{
								 alert("操作成功");
								 window.location.reload();
							}else
								alert(result.message);
						}						  
					}); //将围栏下发的表单转化ajax提交 
				  	$("#selectAll").toggle(function () { 
			                     $("input:checkbox[name='enclosureId']").attr("checked", true); 
					   }
					 , function () { 
						  $("input:checkbox[name='enclosureId']").attr("checked", false); 
					 }
		 );
			} );
		</script>
<body>
		<div id="container" >		
			
			<form id="queryForm" action="<%=ApplicationPath%>/data/getBindEnclosure.action">
			   <input type="hidden" name="queryId" value="selectEnclosures" />		  
			   <input type="hidden" name="vehicleId" value="${vehicleId}" />		  
			  <table width="100%"  class="TableBlock">
			   			   <tr>
				   <td> 围栏名称 </td>
					<td>			    <input type="text" name="name" size="10"  id="name">   </td>
				<td>围栏类型</td>
			   <td>
			   <select id="enclosureType" name="enclosureType" > </select>
			   </td>
			   <td> <input type="button" value="查询未绑定区域"  title="查询" id="btnQuery"/>&nbsp;&nbsp;
           <input type="reset" value="重置" title="重置"/>&nbsp;&nbsp;
		   </td>
            </tr>
			</table>
		   	</form>
	<form id="entityForm" action="<%=ApplicationPath%>/data/enclosureBinding!bindVehicle.action">
        <input type="hidden"  name="vehicleId"  id="vehicleId" value="${vehicleId}"/>
			<table width="100%"  class="TableBlock">
           		<tr>
				<td style="color:blue;font-weight:bold;">选择下面未绑定的区域或路线
           <input type="submit" id="btnBind" value="添加绑定" title=""  />
		      </td>
        <td colspan="5" align="left">
		  已绑定区域和路线: 
	      <select id="enclosureId" name="enclosureId"  class=""> </select>&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="button" value="解除绑定" onclick="unbind();" />
        </td>
    </tr>
		</table>

			<div id="dynamic">
				<table class="t1" id="dataTable" width="100%">
				   <col width="5%">
				   <col width="15%">
				   <col width="9%">
				   <col width="15%">
				   <col width="18%">
				   <col width="18%">
				   <col width="6%">
					<thead>
						<tr>
							<tr>
							    <th width="3%"><input type='checkbox' id='selectAll'></input>
								<th>围栏名称</th>
								<th>围栏类型</th>
								<th>报警类型</th>
								<th>开始时间</th>
								<th>结束时间</th>
								<th width="5%">限速</th>
								<th>创建时间</th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>					
				</table>
			</div>
			<div class="spacer"></div>
			
		</form>	 
			</div>

</body>

